<!--
 * @Description: 头部栏
 * @Author: zy
 * @Date: 2020-11-14 14:33:54
 * @LastEditors: zy
 * @LastEditTime: 2021-01-10 16:35:25
-->
<template>
    <div id="topBar">
        <span>VisCEB</span>
        <router-link to="/index/home">
        <el-link icon="el-icon-s-home">首页</el-link>
        </router-link>
        <router-link v-if="isNotLogIn" to="/index/login">
            <el-link icon="el-icon-user-solid">登录</el-link>
        </router-link>
        <div v-else>
          <router-link to="/index/login">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <span class="user_name">{{userName}}</span>
          </router-link>
          <router-link to="/index/home" style="position:relative;top:-14px">
            <el-link icon="el-icon-s-management">管理</el-link>
          </router-link>
          <router-link to="/index/home">
            <el-link icon="el-icon-s-home" style="position:relative;top:-14px">退出</el-link>
          </router-link>
        </div>
    </div>
</template>
<script>
export default {
  props: {
    isNotLogIn: {
      type: Boolean,
      default: true
    },
    userName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {

    }
  },
  methods: {
    saveAuthor () {
      const author = {
        authorName: 'zy'
      }
      console.log(author)
      this.$http.post('author/saveAuthor', author)
        .then(res => {
          console.log(res)
        })
    }
  }
}
</script>
<style scoped>
#topBar {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 8px;
    width: calc(100% - 16px);
    height: 50px;
    background-color: black;
}
span {
    margin-left: 200px;
    color:white;
    line-height: 20px;
    margin-right: 15px;
    font-size: 24px;
}
.el-link {
    margin-left: 15px;
    margin-right: 15px;
    font-size: 20px;
    color: white;
}
.el-avatar {
    margin-top: 5px;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 20px;
    color: white;
}

.user_name {
    margin-left: -10px;
    position: relative;
    top: -10px;
}

a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}
</style>
